<template>
  <div class="photo-container">
    <!-- 图片分类导航栏 -->
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            v-for="item of catalist"
            :key="item.id"
            :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']"
            @click="getphotolist(item.id)" 
          >{{item.title}}</a>
        </div>
      </div>
    </div>
    <ul class="ul-img">
      <router-link tag="li" :to="'/home/photoinfo/'+item.id" v-for="item in photolist" :key="item.id">
      <!-- 将v-lazy伪指令添加到img其值设置为图像URL的元素。并记住配置加载图像的样式。 -->
        <img v-lazy="item.img_url" />
        <div class="info-contain">
            <h3>{{item.title}}</h3>
            <div class="info-content">{{item.zhaiyao}}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
// 1. 导入 mui 的js文件
import mui from "../../assets/mui/js/mui";
import { Toast } from "mint-ui";
export default {
  name: "PhotoList",
  data() {
    return {
      catalist: [], //存取图片分类文字
      photolist: [] //存取图片
    };
  },
  
  mounted() {
    // 当组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
    // 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
    this.getcatalist();
    this.getphotolist(0);

    // 2. 初始化滑动控件
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  methods: {
    getcatalist() {
      this.$http.get("api/getimgcategory").then(result => {
        const data = result.body;
        // console.log(data);
        if (data.status === 0) {
          // 向数组头部添加一个对象
          data.message.unshift({ id: 0, title: "全部" });
          this.catalist = data.message;
        } else {
          Toast("请求数据失败");
        }
      });
    },
    getphotolist(cateid){
      // 默认id为0
      this.$http.get('api/getimages/'+cateid).then(result=>{
        const data=result.body
        if(data.status===0){
          switch(cateid){
            case 14:
              this.photolist=[]
              this.photolist.unshift({
              "id": 40,
              "title": "欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果",
              "img_url": "http://demo.dtcms.net/upload/201504/18/thumb_201504181246376332.jpg",
              "zhaiyao": "继上编欧式客厅装修效果图之后，今天，小编为大家带来的是一组不同类型的欧式卧室装修效果图。欧式卧室的设计风格按不同的地域文化可分为北欧卧室、简欧卧室和传统欧式卧室。在中国，因为欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果，也吸取了洛可可风格中唯美、律…"
            })
            break;
            case 15:
              this.photolist=[]
              this.photolist.unshift({
              "id": 50,
              "title": "有气质且带可爱的美女组图",
              "img_url": "http://demo.dtcms.net/upload/201504/18/thumb_201504181230434303.jpg",
              "zhaiyao": "有气质且带可爱的美女组图有气质且带可爱的美女组图有气质且带可爱的美女组图"
            },
             {
            "id": 45,
            "title": "Vassilis Tangoulis意境风光摄影作品",
            "img_url": "http://demo.dtcms.net/upload/201504/18/thumb_201504181347324908.jpg",
            "zhaiyao": "Vassilis Tangoulis 白色的沉默摄影作品集，Vassilis Tangoulis 是一位屡获殊荣的艺术摄影师，他创作了一组迷人的黑白意境摄影作品，每一张图片都传达了沉默中的宁静时光，给人以宁静致远的深思。"
            })
            break;
            case 16:
              this.photolist=[]
              this.photolist.unshift({
              "id": 50,
              "title": "有气质且带可爱的美女组图",
              "img_url": "http://demo.dtcms.net/upload/201504/18/thumb_201504181416251481.jpg",
              "zhaiyao": "有气质且带可爱的美女组图有气质且带可爱的美女组图有气质且带可爱的美女组图"
            },
            {
              "id":48,
              "title": "西班牙摄影师的人像创意摄影作品：血秀",
              "img_url": "http://demo.dtcms.net/upload/201504/18/thumb_201504181356417887.jpg",
              "zhaiyao": "现居马德里的西班牙摄影师Paco Peregrn的西班牙摄影师的人像创意摄影作品。这组名为“血秀（The Blood Show）”的作品是为《Ae》杂志拍摄，艺术指导/造型师：Kattaca，化妆师/发型师：Yurema Villa。PacoPeregrn生于西班牙阿尔梅利亚，毕业于塞尔维亚艺术学院，后又到圣马丁艺…"
            })
            break;
            default :
               this.photolist=data.message
              break;
          }
        }else{
          Toast('请求数据失败')
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  touch-action: pan-y;//上下可移动
}
.photo-container{
  .ul-img{
    padding:0 .2rem;
    margin: 0 0 1rem 0;
    li{
      margin: .2rem 0;
      position: relative;
      background-color: #ccc;
      box-shadow: 1px 0 9px rgba(0,0,0,.2);
      img{
        width: 100%;
        display: block;
        text-align: center;
      }
      // 懒加载
       img[lazy=loading] {
          width: 40px;
          height: 300px;
          margin: auto;
      }
      .info-contain{
        position: absolute;
        bottom:0;
        left: 0;
        right:0;
        color: #fff;
        background: rgba(0,0,0,.3);
        max-height: 1.88rem;
        h3{
          font-size: .28rem;
          line-height: .48rem
        }
        .info-content{
          font-size: .24rem;
          line-height: .40rem;
        }
      }
     
    }
  }
}

</style>